<template>
    <div class="content">
        <div class="search">
            <el-input placeholder="请输入小说名" icon="search" v-model="bookName" :on-icon-click="searchBook" autofocus>
            </el-input>
        </div>
        <div class="allBook">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="拼命加载中">
                <el-table-column
                        prop="bookId"
                        label="小说ID"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="bookName"
                        label="小说名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="style"
                        label="类小说型"
                        width="120px">
                </el-table-column>
                <el-table-column
                        prop="introduct"
                        label="小说简介"
                        width="290"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="focusCount"
                        label="关注度"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="140">
                    <template scope="scope">
                        <router-link to="/app/editeBook"><el-button @click="editeBook(scope.row)" type="text" size="small">编辑</el-button></router-link>
                        <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="13"
                    layout="prev, pager, next"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import { MessageBox } from 'element-ui';
    import {vm,key1} from './commonComponents/connect.vue'
    export default{
        data:function(){
            return {
                bookName: '',
                tableData: [],
                loading:true,
                count:'',
            }
        },
        methods: {
//            handleSizeChange(val) {
//                console.log(`每页 ${val} 条`);
//            },
            //当前页改变时触发的函数
            handleCurrentChange(val) {
                this.$http.get(`http://localhost/api/getAllbooks/${val}`).then(function (result) {
                    if(`${val}` ==1){
                        this.tableData = result.body.slice(0,13);
                    }
                    else{
                        this.tableData = result.body;
                    }
                })
            },
            //获取第一页书籍的信息
            getAllBooks: function () {
                this.$http.get('http://localhost/api/getAllBooks/1').then(function (result) {
                    this.loading = false;
                    this.tableData = result.body.slice(0,13);
                    this.count = result.body.length;
                })
            },
            //搜索书本
            searchBook: function () {
                this.$http.post('http://localhost/api/searchBook', {bookName: this.bookName}, {emulateJSON: true}).then(function (result) {
                    console.log(result);
                    this.tableData = result.body;
                })
            },
            //点击修改书本
            editeBook: function (row) {
                vm.$emit(key1, row.bookId);
            },
            //点击删除书本
            deleteBook: function (row) {
                var _this = this;
                let deleteBookId = row.bookId;
                MessageBox({
                    title: '提示',
                    message: '此操作将永久删除该文件, 是否继续?',
                    type: 'warning',
                    showCancelButton: true,
                    callback: function (action, instance) {
                        if (action == "confirm") {
                            _this.$http.get('http://localhost/api/deleteBook/' + deleteBookId).then(function (result) {
                                instance.$message({
                                    type: 'success',
                                    message: result.body.message
                                })
                            });
                            _this.getAllBooks();
                        } else {
                            instance.$message({
                                type: 'info',
                                message: "取消删除"
                            })
                        }
                    }
                })
            }
        },
        created: function () {
            this.getAllBooks();
        }
    }
</script>
<style scoped>
    .content{
        width: 100%;
        padding: 20px;
        height: 800px;
    }
    .content>.search{
        width: 100%;
        height: 40px;
    }
    .content>.allBook{
        height: 600px;
    }

</style>